<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">电力巡检系统 </el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/xianlus'}">线路管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row style="float: left; margin-left: 66px;margin-top: 17px;">
      线路编号:<el-input v-model="form.bianhao" style="width: 150px"></el-input>
      状态: <el-select v-model="form.type" style="width: 150px" clearable>
        <el-option v-for="item in options" :value="item.value" :label="item.lable" :key="item.value"></el-option>
      </el-select>
      <el-button @click="chaxun" type="primary" icon="el-icon-search" style="margin-left: -3px">查询</el-button>
      <el-button @click="tianjia" type="primary" icon="el-icon-edit" style="margin-left: -4px;">添加线路</el-button>
    </el-row>
    <el-table :data="xianluDate" style="width: 1000px; margin: auto;" @expand-change="change">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table v-if="scope.row.gantas!=null" :data="scope.row.gantas">
            <el-table-column label="编号" prop="gid"></el-table-column>
            <el-table-column label="杆塔编号 " prop="gcode"></el-table-column>
            <el-table-column label="创建时间 " prop="createtime"></el-table-column>

          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="xlnum" label="线路编号" width="170px"></el-table-column>
      <el-table-column prop="xlname" label="线路名称" width="170px"></el-table-column>
      <el-table-column prop="createtime" label="创建时间" width="170px"></el-table-column>
      <!-- <el-table-column prop="" label="塔基数">
      <template slot-scope="scope">
        <span v-text="scope.row.gantas==null?0:scope.row.gantas.length"></span>
      </template>
    </el-table-column> -->
      <el-table-column label="启用状态" width="170px">
        <template slot-scope="scope">
          <el-switch @change="changeStatus($event,scope.row,scope.$index)" v-model="scope.row.isstatus" :active-value="1"
            :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="xiugai(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="page" @prev-click="page" @next-click="page" background layout="prev,pager,next,total,jumper"
      :total="total" :page-size="size"></el-pagination>
    <el-dialog title="添加线路" :visible.sync="visible" width="40%" style="text-align: center;">
      <el-form :model="xianlu">
      <!--  <el-form-item label="线路编号" prop="ganme">
          <el-input v-model="xianlu.xlnum" style="width: 220px;"></el-input>
        </el-form-item> -->
        <el-form-item label="线路名称" prop="xid">
          <el-input v-model="xianlu.xlname" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="添加杆塔" prop="xid">
          <el-select v-model="xianlu.gantas" multiple :multiple-limit="0" value-key="gid">
            <el-option v-for="item in gantas" :label="item.gcode" :value="item" :key="item.gid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="启用状态" prop="enable">
          <el-radio v-model="xianlu.isstatus" :label="1">启用</el-radio>
          <el-radio v-model="xianlu.isstatus" :label="2">不启用</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="colseMe()">确 定</el-button>
      </div>
      <!--嵌套表单的 Dialog的结束-->
    </el-dialog>
    <!-- 修改线路-->
    <el-dialog title="修改线路" :visible="xiuvisible" width="40%" style="text-align: center;" @close="closess">
      <el-form :model="updateXinalu">
        <el-form-item label="线路编号" prop="gid">
          <el-input v-model="updateXinalu.xlnum" disabled style="width: 220px;margin-left: 0px;"></el-input>
        </el-form-item>

        <el-form-item label="线路名称" prop="ganme">
          <el-input v-model="updateXinalu.xlname" style="width: 220px;"></el-input>
        </el-form-item>

        <el-form-item label="拥有杆塔" prop="xid">
          <el-select v-model="updateXinalu.gantas" multiple value-key="gid" @remove-tag="remove" @change="change">
            <el-option v-for="item in gantas" :label="item.gcode" :value="item" :key="item.gid"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="启用状态" prop="enable">
          <el-radio v-model="updateXinalu.isstatus" :label="1">启用</el-radio>
          <el-radio v-model="updateXinalu.isstatus" :label="0">不启用</el-radio>
        </el-form-item>
      </el-form>
      <!-- Form -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="closess">取 消</el-button>
        <el-button type="primary" @click="xiucloeMe()">确 定</el-button>
      </div>
      <!--嵌套表单的 Dialog的结束-->
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        form: {
          bianhao: '',
          type: '请选择'
        },
        options: [{
          lable: '启用',

          value: "1"
        }, {
          lable: '停用',
          value: '0'
        }],
        xianluDate: [],
        total: 0,
        size: 5,
        xianlu: {
          id: '',
          createtime: '',
          isstatus: 1,
          xlnum: '',
          xlname: '',
          gantas: []
        },
        visible: false,
        gantas: [],
        click: 'all',
        updateXinalu: {
          id: '',
          createtime: '',
          isstatus: 1,
          xlnum: '',
          xlname: '',
          gantas: []
        },
        xiuvisible: false,
        removeGatnas: []
      }
    },
    methods: {
      tianjia() {
        this.visible = true
        this.$message('添加')
      },
      chaxun() {
        this.click = 'where'
        let postData = this.$qs.stringify({
          pageNo: 1,
          pageSize: this.size,
          xlnum: this.form.bianhao,
          isstatus: this.form.type
        })
        axios.post("http:localhost:8086/xianlu/where", postData).then(vs => {
          this.xianluDate = vs.data.list
          this.total = vs.data.total
          this.xianluDate.forEach(item => {
            item.createtime = this.aaa(item.createtime)

          })
        })
      },
      getData: function(pageNo, pageSize) {
        let postData = this.$qs.stringify({
          pageNo: pageNo,
          pageSize: this.size
        })
        axios.post("http:localhost:8086/xianlu/all", postData).then(vs => {
          this.xianluDate = vs.data.list
          this.total = vs.data.total

          this.xianluDate.forEach(item => {
            item.createtime = this.aaa(item.createtime)
            console.log(item)
          })
        })
      },
      page: function(curpage) {
        if (this.click == 'all') {
          this.getData(curpage, this.size)
        } else if (this.click == 'where') {
          let postData = this.$qs.stringify({
            pageNo: curpage,
            pageSize: this.size,
            xlnum: this.form.bianhao,
            isstatus: this.form.type
          })
          axios.post("http:localhost:8086/xianlu/where", postData).then(vs => {
            this.xianluDate = vs.data.list
            this.total = vs.data.total
            this.xianluDate.forEach(item => {
              item.createtime = this.aaa(item.createtime)

            })
          })
        }

      },
      tingyong(row) {

      },
      colseMe() {
       
        axios.post("http:localhost:8086/xianlu/add", this.xianlu).then(vs => {
          if (vs.status = 200) {
            this.$message("添加成功")
            this.xianlu = {}
            this.xianlu.isstatus = 1
            this.visible = false
            this.getGantas()
            this.getData(1)
          } else {
            this.$message("添加失败")
          }
        })

      },
      getGantas() {
        axios.post("http:localhost:8086/ganta/getGantas").then(vs => {
          this.gantas = vs.data
          console.log(this.gantas)
        })
      },
      aaa: function(asd) {
        var date = new Date(asd) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = date.getMinutes() + ':'
        var s = date.getSeconds()

        console.log(Y + M + D + h + m + s);
        return Y + M + D + h + m + s;
      },
      change: function(row) {
        let postData = this.$qs.stringify({
          xlnum: row.xlnum
        })
        axios.post("http:localhost:8086/ganta/getGantaByXlnum", postData).then(vs => {
          row.gantas = vs.data
          row.gantas.forEach(item => {
            item.createtime = this.aaa(item.createtime)
          })
        })
      },
      changeStatus: function(data, b, index) {
        let postData = this.$qs.stringify({
          isstatus: data,
          id: b.id
        })
        axios.post("http:localhost:8086/xianlu/updateByidAndIsstatus", postData).then(vs => {
          if (vs.status = 200) {
            this.$message("修改成功")
            this.getData(1)
          }
        })
      },
      xiugai(row) {
        let postData = this.$qs.stringify({
          xlnum: row.xlnum
        })
        this.updateXinalu = row
        axios.post("http:localhost:8086/ganta/getGantaByXlnum", postData).then(vs => {
          row.gantas = vs.data
          vs.data.forEach(item => {
            this.gantas.push(item)
          })
        })
        console.log('this.updateXinalu', this.updateXinalu.gantas)

        this.xiuvisible = true

        this.updateXinalu = row
        console.log(this.gantas, 'gantas')
      },
      xiucloeMe: function() {
         this.updateXinalu.createtime =this.updateXinalu.createtime.split(' ')[0]

        axios.post("http:localhost:8086/ganta/updateGantas", this.removeGatnas).then(vs => {

        })
        axios.post('http:localhost:8086/xianlu/updateXianlu', this.updateXinalu).then(vs => {
          if (vs.status == 200) {
            this.$message("修改成功")
            this.getData(1)
            this.getGantas()
            this.removeGatnas = []
          }
        })


        this.xiuvisible = false
      },
      closess: function() {
        this.getGantas()
        this.xiuvisible = false
      },
      remove: function(tag) {
        this.removeGatnas.push(tag.gid)

      }

    },
    created: function() {
      this.getData(1)
      this.getGantas()
    }
  }
</script>

<style scoped="scoped">

</style>
